﻿import { ElementRef, Injector, Input, Component, ViewChild, OnInit, Output, EventEmitter } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { Spreadsheet } from 'dhx-spreadsheet';
import * as _ from 'lodash';

@Component({
    selector: 'excel-preview',
    template: `
        <div #widget class="widget-box-wide"></div>
        <div *ngIf="!isSingleSheet">
            <button
                *ngFor="let sn of sheetNames"
                type="button"
                class="btn btn-outline-success btn-sm"
                (click)="selectSheet($event, sn)"
                [ngClass]="{ active: sn == sheetName }"
            >
                {{ sn }}
            </button>
        </div>
    `,
    styles: [
        `
            .widget-box-wide {
                height: calc(100vh - 240px);
                width: 100%;
            }
        `
    ]
})
export class ExcelPreviewComponent extends AppComponentBase implements OnInit {
    @ViewChild('widget') container: ElementRef;

    @Input() showToolbar = false;
    @Input() showMenu = false;
    @Input() editLine = false;
    @Input() rowsCount = 100;
    @Input() colsCount = 25;
    @Input() readonly = false;
    @Input() isSingleSheet = false;

    _fileData: any = new Object();

    @Input()
    set fileData(val) {
        this._fileData = val;
        this.init();
    }

    @Output() onSheetChange: EventEmitter<Object> = new EventEmitter<Object>();

    sheetNames: string[];
    sheetName: string;

    sheetData: any[];

    spreadsheet: Spreadsheet;

    constructor(injector: Injector) {
        super(injector);
    }

    ngOnInit(): void {
        const options = {
            toolbarBlocks: [],
            menu: this.showMenu,
            editLine: this.editLine,
            rowsCount: this.rowsCount,
            colsCount: this.colsCount,
            readonly: this.readonly
        };

        if (this.showToolbar) {
            options.toolbarBlocks = [
                'undo',
                'colors',
                'decoration',
                'align',
                'help',
                'lock',
                'clear',
                'rows',
                'columns'
            ];
        }

        this.spreadsheet = new Spreadsheet(this.container.nativeElement, options);

        this.sheetData = [];

        this.sheetNames = [];
    }

    selectSheet(event, sn) {
        if (this.sheetName === sn) {
            return;
        }

        this.sheetName = sn;
        this.reload();
    }

    init() {
        // this.spreadsheet.parse([{ cell: 'A1', value: 10 }, { cell: 'B1', value: 20 }]);
        if (!this._fileData || !this._fileData.fileName) {
            return;
        }

        this.sheetNames = _.map(this._fileData.fileData, 'sheetName');
        this.sheetName = this.sheetNames[0];
        let sheet = this._fileData.fileData[0];
        this.spreadsheet.parse(sheet.sheetData);
        this.onSheetChange.emit(sheet);
    }

    reload() {
        let sheet = _.first(_.filter(this._fileData.fileData, ['sheetName', this.sheetName]));
        this.spreadsheet.parse(sheet.sheetData);
        this.onSheetChange.emit(sheet);
    }
}
